<template>
  <div>
    <h2>{{ title }}-我第一天学习Vue</h2>
    <h2 v-text="title"></h2>
    <div v-text="url"></div>
    <div v-html="url"></div>
    <h2>{{ person }}</h2>
    <h2 v-show="isShow">这是需要显示与隐藏的内容</h2>
    <!-- <button v-on:click="changeName">点击修改姓名</button> -->
    <!-- <button @click="changeName">点击修改姓名</button> -->
    <!-- <button @click="changeName('刘德华', 28)">点击修改姓名-传参</button> -->
    <button @click="changeName(userName, num)">点击修改姓名-传参</button>
    <button @click="show">控制显示与隐藏</button>
  </div>
</template>

<script setup lang="ts">
//v-for
//:key
//v-text:渲染文本内容，和{{}} 相当于innerText
//v-html:渲染html标签 相当于innerHTML
//v-on:用来绑定事件  v-on:事件类型   v-on：简写成@
//事件传参
// v-show:控制元素的显示与隐藏   通过css的display来控制元素的显示与隐藏
//语法：v-show="布尔值"
import { ref, reactive, toRefs } from 'vue'
let data = reactive({
  person: {
    name: '张三',
    age: 20
  },
  title: 'vue指令',
  url: '<a href="http:www.baidu.com"/>点我跳到百度</a>',
  userName: '张珊珊',
  num: 70,
  isShow: true
})

let { person, title, url, userName, num, isShow } = toRefs(data)

//函数
//修改名字
// const changeName = () => {
//   person.value.name = '李四'
// }

// const changeName = (str: string, num: number) => {
//   person.value.name = str
//   person.value.age = num
// }

const changeName = (str: any, num: any) => {
  person.value.name = str
  person.value.age = num
}

const show = () => {
  if (isShow.value == true) {
    isShow.value = false
  } else {
    isShow.value = true
  }
}
</script>

<style scoped></style>
